<!DOCTYPE html>

<head>
  <title>YAA 智能体</title>
  <link rel="icon" type="image/svg+xml" href="assets/yaa.svg">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/main.css">
  <script type="text/javascript" src="js/main.js"></script>
  <script type="text/javascript" src="js/marked.min.js"></script>
</head>

<body>
  <!-- 主容器 -->
  <div class="yaa-container">
    <!-- 控制面板 -->
    <div class="ctrl-panel panel">
      <div class="header">
        <img src="assets/yaa.svg" class="yaa icon" alt="YAA 图标">
        <span>YAA 智能体</span>
      </div>
      <div class="session list">
        <div class="session-item">
          <div class="session-info">
            <strong>股价查询</strong>
            <div class="session-item-content">帮我查一下近一个月英伟达的股价并用 mermaid 画出来</div>
            <div class="session-item-time">2025-04-08T14:08:42.457Z</div>
          </div>
          <button data-id="session-1744104365100-4hpizdmrf" class="delete-session-btn delete icon"></button>
        </div>
      </div>
      <div class="btn list">
        <button class="btn-new">
          <span>新建会话</span>
        </button>
        <button class="btn-settings">
          <span>设置</span>
        </button>
        <button class="btn-about">
          <span>关于</span>
        </button>
      </div>
    </div>
    <!-- 设置面板 -->
    <div class="sett-panel panel closed">
      <div class="header">
        <span class="head-title">设置</span>
        <div class="buttons">
          <button class="save-settings">
          </button>
        </div>
      </div>
      <div class="sett-block">
        <h2>YAA 设置</h2>
        <p>API 地址</p>
        <input type="text" class="yaa-api" placeholder="http://127.0.0.1:12345">
        <p>API 密钥</p>
        <input type="text" class="yaa-api-key" placeholder="..."></input>
        <p>智能体人格</p>
        <input type="text" class="yaa-character" placeholder="你是一个叫 yaa 的智能体。">
        <h2>模型服务</h2>
        <p>API 地址</p>
        <input type="text" class="api-url" placeholder="https://api.deepseek.com">
        <p>API 密钥</p>
        <input type="text" class="api-key" placeholder="sk-..."></input>
        <p>模型</p>
        <input type="text" class="model-name" placeholder="deepseek-chat"></input>
      </div>
    </div>
    <!-- 交互面板 -->
    <div class="chat-panel panel">
      <div class="header">
        <div class="buttons">
          <button title="菜单" class="menu"></button>
          <button title="导出会话" class="save"></button>
        </div>
        <span>股价查询</span>
        <div class="buttons">
          <button title="重载" class="reload"></button>
          <button title="缩放" class="maximize"></button>
        </div>
      </div>
      <div class="content">
        <div class="width-768">
          <div class="object user">
            <div class="avatar"></div>
            <div class="bubble">
              <p>帮我查一下近一个月英伟达的股价并用 mermaid 画出来</p>
            </div>
          </div>
          <div class="object assistant">
            <div class="avatar"></div>
            <div class="bubble">
              <p>好的，我将通过以下步骤为您查询近一个月（2025年3月8日至2025年4月8日）英伟达的股价数据并绘制图表：</p>
              <ol>
                <li>使用“搜索”工具查询可获取股价信息的网站。</li>
                <li>在查询结果中选择一个网站，并使用“网页访问”工具获取近一个月（3月8日到4月8日）的股价数据。</li>
                <li>使用“数据处理”工具将股价数据整理为表格格式，再将表格数据转换为图表并返回给用户。</li>
              </o>
            </div>
          </div>
          <div class="object system">
            <div class="avatar"></div>
            <div class="bubble">
              <details>
                <summary>
                  <code>搜索</code>等 2 个工具已执行
                  </summar>
              </details>
            </div>
          </div>
          <div class="object assistant">
            <div class="avatar"></div>
            <div class="bubble" style="width: 100%;">
              <svg aria-roledescription="xychart" role="graphics-document document" viewBox="0 0 700 500" style="max-width: 700px;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-1744114378135"><style>#mermaid-1744114378135{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1744114378135 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1744114378135 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1744114378135 .error-icon{fill:#552222;}#mermaid-1744114378135 .error-text{fill:#552222;stroke:#552222;}#mermaid-1744114378135 .edge-thickness-normal{stroke-width:1px;}#mermaid-1744114378135 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1744114378135 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1744114378135 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1744114378135 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1744114378135 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1744114378135 .marker{fill:#333333;stroke:#333333;}#mermaid-1744114378135 .marker.cross{stroke:#333333;}#mermaid-1744114378135 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-1744114378135 p{margin:0;}#mermaid-1744114378135 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g></g><g class="main"><rect fill="white" class="background" height="500" width="700"></rect><g class="chart-title"><text transform="translate(350, 23) rotate(0)" text-anchor="middle" dominant-baseline="middle" font-size="20" fill="#131300" y="0" x="0">英伟达(NVDA)近一个月股价走势 (2025/3/10-2025/4/7)</text></g><g class="plot"><g class="line-plot-0"><path stroke-width="2" stroke="#ECECFF" fill="none" d="M96.183,84.978L125.608,100.922L155.033,90.954L184.458,122.914L213.883,116.314L243.308,179.002L272.733,202.746L302.158,184.274L331.583,234.914L361.008,164.978L390.433,171.034L419.858,158.914L449.283,147.146L478.708,141.202L508.133,164.978L537.558,179.002L566.983,242.986L596.408,184.274L625.833,320.85L655.258,330.45L684.683,427.25"></path></g></g><g class="bottom-axis"><g class="axis-line"><path stroke-width="2" stroke="#131300" fill="none" d="M 80.86666870117188,465.5 L 700,465.5"></path></g><g class="label"><text transform="translate(96.18334197998047, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/10</text><text transform="translate(125.60834121704102, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/11</text><text transform="translate(155.03334045410156, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/12</text><text transform="translate(184.4583396911621, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/13</text><text transform="translate(213.88333892822266, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/14</text><text transform="translate(243.3083381652832, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/17</text><text transform="translate(272.73333740234375, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/18</text><text transform="translate(302.1583366394043, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/19</text><text transform="translate(331.58333587646484, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/20</text><text transform="translate(361.0083351135254, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/21</text><text transform="translate(390.43333435058594, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/24</text><text transform="translate(419.8583335876465, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/25</text><text transform="translate(449.28333282470703, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/26</text><text transform="translate(478.7083320617676, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/27</text><text transform="translate(508.1333312988281, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/28</text><text transform="translate(537.5583305358887, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">3/31</text><text transform="translate(566.9833297729492, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">4/1</text><text transform="translate(596.4083290100098, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">4/2</text><text transform="translate(625.8333282470703, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">4/3</text><text transform="translate(655.2583274841309, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">4/4</text><text transform="translate(684.6833267211914, 476.5) rotate(0)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="14" fill="#131300" y="0" x="0">4/7</text></g><g class="ticks"><path stroke-width="2" stroke="#131300" fill="none" d="M 96.18334197998047,466.5 L 96.18334197998047,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 125.60834121704102,466.5 L 125.60834121704102,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 155.03334045410156,466.5 L 155.03334045410156,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 184.4583396911621,466.5 L 184.4583396911621,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 213.88333892822266,466.5 L 213.88333892822266,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 243.3083381652832,466.5 L 243.3083381652832,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 272.73333740234375,466.5 L 272.73333740234375,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 302.1583366394043,466.5 L 302.1583366394043,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 331.58333587646484,466.5 L 331.58333587646484,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 361.0083351135254,466.5 L 361.0083351135254,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 390.43333435058594,466.5 L 390.43333435058594,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 419.8583335876465,466.5 L 419.8583335876465,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 449.28333282470703,466.5 L 449.28333282470703,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 478.7083320617676,466.5 L 478.7083320617676,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 508.1333312988281,466.5 L 508.1333312988281,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 537.5583305358887,466.5 L 537.5583305358887,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 566.9833297729492,466.5 L 566.9833297729492,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 596.4083290100098,466.5 L 596.4083290100098,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 625.8333282470703,466.5 L 625.8333282470703,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 655.2583274841309,466.5 L 655.2583274841309,471.5"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 684.6833267211914,466.5 L 684.6833267211914,471.5"></path></g></g><g class="left-axis"><g class="axisl-line"><path stroke-width="2" stroke="#131300" fill="none" d="M 79.86666870117188,46 L 79.86666870117188,464.5"></path></g><g class="label"><text transform="translate(68.86666870117188, 55.25) rotate(0)" text-anchor="end" dominant-baseline="middle" font-size="14" fill="#131300" y="0" x="0">1100</text><text transform="translate(68.86666870117188, 95.25) rotate(0)" text-anchor="end" dominant-baseline="middle" font-size="14" fill="#131300" y="0" x="0">1050</text><text transform="translate(68.86666870117188, 135.25) rotate(0)" text-anchor="end" dominant-baseline="middle" font-size="14" fill="#131300" y="0" x="0">1000</text><text transform="translate(68.86666870117188, 175.25) rotate(0)" text-anchor="end" dominant-baseline="middle" font-size="14" fill="#131300" y="0" x="0">950</text><text transform="translate(68.86666870117188, 215.25000000000003) rotate(0)" text-anchor="end" dominant-baseline="middle" font-size="14" fill="#131300" y="0" x="0">900</text><text transform="translate(68.86666870117188, 255.25) rotate(0)" text-anchor="end" dominant-baseline="middle" font-size="14" fill="#131300" y="0" x="0">850</text><text transform="translate(68.86666870117188, 295.25) rotate(0)" text-anchor="end" dominant-baseline="middle" font-size="14" fill="#131300" y="0" x="0">800</text><text transform="translate(68.86666870117188, 335.24999999999994) rotate(0)" text-anchor="end" dominant-baseline="middle" font-size="14" fill="#131300" y="0" x="0">750</text><text transform="translate(68.86666870117188, 375.25000000000006) rotate(0)" text-anchor="end" dominant-baseline="middle" font-size="14" fill="#131300" y="0" x="0">700</text><text transform="translate(68.86666870117188, 415.25) rotate(0)" text-anchor="end" dominant-baseline="middle" font-size="14" fill="#131300" y="0" x="0">650</text><text transform="translate(68.86666870117188, 455.25) rotate(0)" text-anchor="end" dominant-baseline="middle" font-size="14" fill="#131300" y="0" x="0">600</text></g><g class="ticks"><path stroke-width="2" stroke="#131300" fill="none" d="M 78.86666870117188,55.25 L 73.86666870117188,55.25"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 78.86666870117188,95.25 L 73.86666870117188,95.25"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 78.86666870117188,135.25 L 73.86666870117188,135.25"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 78.86666870117188,175.25 L 73.86666870117188,175.25"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 78.86666870117188,215.25000000000003 L 73.86666870117188,215.25000000000003"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 78.86666870117188,255.25 L 73.86666870117188,255.25"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 78.86666870117188,295.25 L 73.86666870117188,295.25"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 78.86666870117188,335.24999999999994 L 73.86666870117188,335.24999999999994"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 78.86666870117188,375.25000000000006 L 73.86666870117188,375.25000000000006"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 78.86666870117188,415.25 L 73.86666870117188,415.25"></path><path stroke-width="2" stroke="#131300" fill="none" d="M 78.86666870117188,455.25 L 73.86666870117188,455.25"></path></g><g class="title"><text transform="translate(5, 255.25) rotate(270)" text-anchor="middle" dominant-baseline="text-before-edge" font-size="16" fill="#131300" y="0" x="0">股价($)</text></g></g></g><g class="mermaid-tmp-group"></g></svg>
            </div>
          </div>
        </div>
      </div>
      <div class="input">
        <textarea placeholder="输入消息……"></textarea>
        <div class="buttons">
          <button title="发送消息" class="send-message"></button>
          <button title="添加附件" class="add-attachment"></button>
          <button title="回到底部" class="back-bottom"></button>
        </div>
      </div>
    </div>
  </div>
  <link rel="stylesheet" href="css/markdown.css">
  <link rel="stylesheet" href="css/icon.css">
</body>